<template>
  <view class="dhcc-flex">
    <text class="dhcc-radio" :class="[ {'checked': checked}, {'disabled': disabled} ]">
      <text class="dhcc-radio-interior" />
    </text>
    <text class="dhcc-radio-label">
      {{ name }}
    </text>
  </view>
</template>

<script>
export default {
  name: 'Radio',
  props: {
    value: {
      type: String,
      default: '1'
    },
    name: {
      type: String,
      default: '选项'
    },
    checked: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>

<style>
  /* 单选框 */
  .dhcc-radio {
    display: inline-block;
    background-color: #ffffff;
    width: 32rpx;
    height: 32rpx;
    border: 2rpx solid #e3e3e3;
    border-radius: 50%;
    position: relative;
  }
  .dhcc-radio-interior {
    display: inline-block;
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    background-color: transparent;
    position: absolute;
    top: 8rpx;
    left: 8rpx;
  }
  .dhcc-radio-label {
    font-size: var(--font-size-title-small);
    color: var(--dhcc-title-color);
    margin-left: 12rpx;
  }
  .dhcc-radio.checked {
    background-color: var(--dhcc-main-color);
  }
  .dhcc-radio.checked .dhcc-radio-interior {
    background-color: var(--dhcc-con-back);
  }
  .dhcc-radio.disabled {
    background-color: #f5f5f5;
  }
  .dhcc-radio.disabled.checked .dhcc-radio-interior {
    background-color: #c1c1c1;
  }
</style>
